window.onload = function() {
	var container = document.getElementById("container"),
		list = document.getElementById("list"),
		lsLen = list.children.length,
		img = list.children,
		imgW = img[0].width,
		imgH = img[0].height,
		prev = document.getElementById("prev"),
		next = document.getElementById("next"),
		btnBox = null,
		btn = createBtn(),
		index = 0,
		timer = null;

	init();

	container.onmouseover = function() {
		prev.style.display = "inline";
		next.style.display = "inline";
	}

	container.onmouseout = function() {
		prev.style.display = "none";
		next.style.display = "none";
	}

	prev.onclick = function() {
		play("prev");
		autoPlay("prev");
	}

	next.onclick = function() {
		play("next");
		autoPlay("next");
	}

	btnBox.onclick = function(e) {
		var e = e || window.event,
			target = e.target || e.srcElement;

		cancelSelect();

		if(target.nodeName.toLowerCase() == "span") {
			clearInterval(timer);
			var _index = target.index
			if(index == _index) {
				return;
			} else if(_index > index) {
				list.style.left = -_index * imgW + "px";
			} else if(_index < index) {
				list.style.left = -(_index + 2) * imgW + "px";
			}
			extraEffect(_index + 1);
			animate(list, {
				"left": [-(_index + 1) * imgW]
			});
			index = _index;
			highLightBtn();
			autoPlay("next");
		}
	}

	function init() {
		list.appendChild(list.children[0].cloneNode(false));
		list.insertBefore(list.children[lsLen - 1].cloneNode(false), list.children[0]);
		list.style.left = -imgW + "px";
		list.style.width = imgW * (lsLen + 2) + "px";
		autoPlay("next");
	}

	function createBtn() {
		btnBox = document.createElement("div");
		btnBox.className = "buttons";
		for(var i = 0; i < lsLen; i++) {
			var span = document.createElement("span");
			span.innerText = i + 1;
			span.index = i;
			if(i == 0) {
				span.className = "on";
			}
			btnBox.appendChild(span);
		}

		container.appendChild(btnBox);
		btnBox.style.left = (imgW - btnBox.offsetWidth) / 2 + "px";
		return btnBox.children;
	}

	function highLightBtn() {
		for(var j = 0; j < lsLen; j++) {
			btn[j].className = "";
		}
		btn[index].className = "on";
	}

	function play(dir) {
		clearInterval(timer);
		if(dir == "next") {
			++index
		} else if(dir == "prev") {
			--index;
		}

		if(index > lsLen - 1) {
			index = 0;
			list.style.left = -index * imgW + "px";
		} else if(index < 0) {
			index = lsLen - 1;
			list.style.left = -(index + 2) * imgW + "px";
		}
		extraEffect(index + 1);
		animate(list, {
			"left": [-(index + 1) * imgW]
		});

		highLightBtn();
	}

	function autoPlay(dir) {
		timer = setInterval(function() {
			play(dir);
		}, 5000);
	}

	function extraEffect(index) {
		img[index].style.width = imgW * 2 + "px";
		img[index].style.height = imgH * 2 + "px";
		img[index].style.opacity = 0.3;
		animate(img[index], {
			"width": [imgW],
			"height": [imgH],
			"opacity": [100, 50]
		});
	}

	function cancelSelect() {
		window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
	}

	function getStyle(obj, attr) {
		if(obj.currentStyle) {
			return obj.currentStyle[attr];
		}
		return getComputedStyle(obj, false)[attr];

	}

	function animate(obj, json, fn) {
		clearInterval(obj.timer);
		obj.timer = setInterval(function() {
			var bool = true;
			for(var attr in json) {
				var current = (attr == "opacity") ? Math.round(getStyle(obj, attr) * 100) : (parseInt(getStyle(obj, attr)) || 0),
					target = json[attr][0];
					steps = json[attr][1] || 10,
					speed = (target - current) / steps;

				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				current = current + speed;

				if(attr == 'opacity') {
					obj.style.filter = 'alpha(opacity:' + current + ')';
					obj.style[attr] = current / 100;

				} else {
					obj.style[attr] = current + 'px';
				}
				if(target !== current) {
					bool = false;
				}
			}

			if(bool) {
				clearInterval(obj.timer);
				if(fn) {
					fn();
				}
			}
		}, 1000 / 60);
	}

}